<template>
    <!-- 临时用餐台账 -->
    <base-breadcrumb :title="$route.meta.title">
        <!-- 搜索 -->
        <searchData ref="searchData" :searchData="searchArr" @search="search" :isExpand="false"></searchData>
        <!-- 表格 -->
        <a-card :bordered="false">
            <!-- <title-name :title="$route.meta.title"></title-name> -->
            <!-- <service-export-mould
                url="/officeCasualMealsApply/queryOfficeCasualMealsApplyListExport"
                :requestParams="queryParam"
                icon="cloud-download"
            ></service-export-mould> -->
            <a-alert class="mb12 mt12" type="info" show-icon>
                <template slot="message">
                    <span>
                        总费用
                        <a>{{ form.total }}</a>
                        元
                    </span>
                    <a-divider type="vertical" />
                    <span>
                        接待餐费用
                        <a>{{ form.host }}</a>
                        元
                    </span>
                    <a-divider type="vertical" />
                    <span>
                        职工餐费用
                        <a>{{ form.staff }}</a>
                        元
                    </span>
                </template>
            </a-alert>
            <!-- 表格 -->
        <list-table
            ref="table"
            row-key="id"
            :columns="columns"
            :request="loadData"
            :alert="true"
            show-size-changer
            show-quick-jumper
            :export-config="{ use: true, select: '临时用餐台账', all: '临时用餐台账' }"
        >
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
                <template slot="action" slot-scope="text, record">
                    <a @click="handleManage(-1, record)">查看</a>
                    <a-divider
                        v-if="record.expenses == 0 && record.mealsType == '605004528177254567'"
                        v-btnPermission="'oa_015_fil_03'"
                        type="vertical"
                    ></a-divider>
                    <a
                        v-if="record.expenses == 0 && record.mealsType == '605004528177254567'"
                        v-btnPermission="'oa_015_fil_03'"
                        @click="handleManage(1, record)"
                        >填写用餐费用</a
                    >
                </template>
            </list-table>
        </a-card>
                <eat-modal
            v-if="visible.update"
            :init-data="childInitData"
            @cancel="visible.update = false"
            @confirm="handleUpdateConfirm"
        />
    </base-breadcrumb>
</template>

<script>
// import { STable } from '@/components' // 表格
import {
    getPageOfficeCasualMealsApply,
    removeCasualMealsApply,
    getPageOfficeCasualMealsApplyTotal
} from '@/api/office/canteen' // api
import Selector from '@/components/Select/Selector'
import BasePage from '@/views/basePage' // 基础配置
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import ServiceExportMould from '@/components/ServiceExportMould'
import eatModal from './eatModal'
import OrgTreeSelect from '@/components/OrgTreeSelect/index'
const searchArr = [
    // 搜索框
    {
        name: '单位',
        valueKey: 'searchQuery',
        type: OrgTreeSelect
    },
    {
        name: '用餐类别',
        valueKey: 'mealsType',
        type: Selector,
        selectType: '16',
        urlType: 'union'
    },
    {
        name: '用餐时间',
        type: 'month',
        value: 'month',
        attrs: {
            valueFormat: 'YYYY-MM'
        }
    },
    {
        name: '状态',
        value: 'status',
        type: 'select',
        data: [
            {
                value: '0',
                label: '未开始'
            },
            {
                value: '1',
                label: '进行中'
            },
            {
                value: '2',
                label: '已结束'
            }
        ]
    }
]
const columns = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        scopedSlots: { customRender: 'index' }
    },
    {
        title: '单位',
        dataIndex: 'orgIdStr'
    },
    {
        title: '预约部门',
        ellipsis: true,
        dataIndex: 'makeDeptName'
    },
    {
        title: '用餐类别',
        ellipsis: true,
        dataIndex: 'mealsTypeStr'
    },
    {
        title: '用餐时间',
        ellipsis: true,
        dataIndex: 'mealsDateStart',
        customRender(text, record, index) {
            const resolveTime = (val) => {
                try {
                    return val.split('-').join('.')
                } catch {
                    return ''
                }
            }
            return resolveTime(record.mealsDateStart) + '-' + resolveTime(record.mealsDateEnd)
        }
    },
    {
        title: '用餐时段',
        ellipsis: true,
        dataIndex: 'mealsTimeStr'
    },
    {
        title: '事由',
        ellipsis: true,
        dataIndex: 'matter'
    },
    {
        title: '用餐级别',
        ellipsis: true,
        dataIndex: 'receptionLevelStr',
        customRender(text, record, index) {
            return record.receptionLevelStr || '-'
        }
    },
    {
        title: '用餐人数',
        ellipsis: true,
        dataIndex: 'mealsNum'
    },
    {
        title: '用餐费用',
        ellipsis: true,
        dataIndex: 'mealsCost'
    },
    {
        title: '状态',
        ellipsis: true,
        dataIndex: 'status'
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '180px',
        align: 'center',
        scopedSlots: { customRender: 'action' }
    }
]
export default {
  name:'a'+Date.now(),
  extends: new BasePage(),
    components: {
        // STable,
        eatModal,
        ServiceExportMould
    },
    data() {
        this.columns = columns
        this.searchArr = searchArr
        return {
            visible: {
                update: false
            },
            loading: false,
            queryParam: { auditStatus: 'PAST' }, // 查询参数
            loadData: (parameter) => {
                const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
                this.getPageOfficeCasualMealsApplyTotal(requestParameters)
                return getPageOfficeCasualMealsApply(requestParameters).then((res) => {
                    return res
                })
            }, // 加载数据方法 必须为 Promise 对象
            removeApi: { remove: removeCasualMealsApply }, // api
            editModel: 0,
            form: {}
        }
    },
    mounted() {
        console.log(this.$refs.searchData)
        let month =
            new Date().getFullYear() +
            '-' +
            (new Date().getMonth() + 1 > 10 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1))
        //初始值
        this.queryParam.month = month
        this.$refs.searchData.form.setFieldsValue({ month: month })
    },
    methods: {
        // 搜索
        search(value) {
            value && (this.queryParam = { ...value, auditStatus: 'PAST' })
            this.$refs.table.refresh(true)
        },
        getPageOfficeCasualMealsApplyTotal(requestParameters) {
            getPageOfficeCasualMealsApplyTotal(requestParameters).then((res) => {
                this.form = res.data
            })
        },
        handleUpdateConfirm() {
            this.visible.update = false
            this.$refs.table.refresh(true)
        },
        // 操作栏
        handleManage(type, record) {
            this.editModel = type
            if (type == 1) {
                this.childInitData = {
                    ...record,
                    pageType: type
                }
                this.visible.update = true
                return
            }

            let query = {
                editModel: type
            }
            if (record && record.id) {
                query.id = record.id
            }
            this.$router.push({
                name: '/office/canteen/applyEat/updateApplyEat',
                query
            })
        }
    }
}
</script>
